<template>
    <div :class='$style.modal'>
        <div>
            <img :class='$style.logo' src='@/assets/logo.png' />
            <div class='text-center m-t-10 f-16 color-999'>提供最专业的的量化计算</div>
        </div>

        <div :class='$style.tabs'>
            <span :class='[$style.tab, type == 1 ? $style.current : ""]' @click='goTo(1)'>登录</span>
            <span :class='[$style.tab, type == 2 ? $style.current : ""]' @click='goTo(2)'>注册</span>
        </div>

        <div :class='$style.container'>
            <slot></slot>
        </div>
    </div>
</template>

<script lang='ts' setup>
    import { useRouter } from "vue-router"
    const props = defineProps<{
        type : 1 | 2
    }>()

    const router =  useRouter()

    function goTo(type) {
        console.log(type)
        if(type != props.type) {
            router.replace(type == 1 ? '/login' : '/register')
        }
    }

</script>


<style module lang='scss'>
    .modal{
        margin: auto;
        padding-top: 30px;
        width: 500px;
    }

    .logo{
        display: block;
        width: 250px;
        margin: auto;
    }

    .tabs{
        font-size: 0;
        text-align: center;
        margin-top: 40px;
        .tab{
            display: inline-block;
            font-size: 18px;
            padding: 0 20px;
            position: relative;
            cursor: pointer;

            &.current{
                color: $primary-color;
                &::after{
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 50%;
                    height: 2px;
                    background: $primary-color;
                }
            }
        }
    }

    .container{
        width: 500px;
        margin: auto;
        margin-top: 30px;
    }
</style>